<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Dashboard</title>
  <!-- build:css ../../static/css/index.css -->
  <link href="../../resources/contextMenu/jquery.contextMenu.min.css" rel="stylesheet">
  <link href="../../resources/layui/css/layui.css" rel="stylesheet">
  <link href="../../resources/css/iconfont.css" rel="stylesheet">
  <link href="../../resources/css/bundle.css" rel="stylesheet">
  <!-- endbuild -->
</head>
<body>

<div class="layui-fluid">
  <div class="layout-fluid-header">
    <div class="nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">查询列表</a>
      </span>
    </div>
    <h1>
      查询列表
    </h1>

  </div>
  <div class="layout-fluid-container">
    <div class="layout-wrapper">
      <div class="title-bar">
        <h1>用户列表</h1>
        <div class="layui-btn-group">
          <button class="layui-btn layui-btn-sm"><i class="anticon icon-reload1"></i> 刷新</button>
          <button class="layui-btn layui-btn-sm" onclick="handleAdd()"><i class="anticon icon-plus"></i>增加</button>
        </div>
      </div>

      <div class="func-bar">
        <form class="layui-form" id="query_form">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-mid">id：</label>
              <div class="layui-input-inline" style="width: 100px;">
                <input type="tel" name="id" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-mid">名称：</label>
              <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="name" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-mid">时间：</label>
              <div class="layui-input-inline" style="">
                <input type="text" name="createDate" autocomplete="off" class="layui-input fsDate" daterange="1"
                       placeholder=" - " lay-key="1">
              </div>
            </div>
            <div class="layui-inline">
              <div class="layui-input-inline">
                <button class="layui-btn" type="button" function="query"><i class="layui-icon"></i>查询</button>
              </div>
            </div>
          </div>
        </form>
      </div>
      <table class="layui-hide" id="demo" lay-filter="demo"></table>
    </div>
  </div>
</div>

<!-- build:js ../../static/js/main.js -->
<script src="../../resources/jquery/jquery.min.js"></script>
<script src="../../resources/contextMenu/jquery.contextMenu.min.js"></script>
<script src="../../resources/layui/layui.all.js"></script>
<!-- endbuild -->
<!-- build:js ../../static/js/data_template.js -->
<script src="./dataTemplate.js"></script>
<!-- endbuild -->


<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
  var table = layui.table;

  table.render({
    elem: '#demo'
    , data: data.data
    , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
    , cols: [[
      {field: 'id', title: 'ID', sort: true}
      , {field: 'username', title: '用户名'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
      , {field: 'sex', title: '性别', sort: true}
      , {field: 'city', title: '城市'}
      , {field: 'sign', title: '签名'}
      , {field: 'classify', title: '职业', align: 'center'} //单元格内容水平居中
      , {field: 'experience', title: '积分', sort: true, align: 'right'} //单元格内容水平居中
      , {field: 'score', title: '评分', sort: true, align: 'right'}
      , {field: 'wealth', title: '财富', sort: true, align: 'right'}
      , {field: 'right', title: '操作', width: 200, toolbar: '#barDemo', unresize: true}
    ]],
    page: true,
    height: 320
  });
  //监听工具条
  table.on('tool(demo)', function (obj) {
    var data = obj.data;
    if (obj.event === 'detail') {
      layer.msg('ID：' + data.id + ' 的查看操作');
    } else if (obj.event === 'del') {
      layer.confirm('真的删除行么', function (index) {
        obj.del();
        layer.close(index);
      });
    } else if (obj.event === 'edit') {
      layer.open({
        type: 2,
        title: data.username,
        content: './formTemplate.html',
        area: ['600px', '500px'],
        maxmin: true,
        scrollbar: false,
        fixed: true
      });
    }
  });

  var $ = layui.$, active = {
    getCheckData: function () { //获取选中数据
      var checkStatus = table.checkStatus('idTest')
        , data = checkStatus.data;
      layer.alert(JSON.stringify(data));
    }
    , getCheckLength: function () { //获取选中数目
      var checkStatus = table.checkStatus('idTest')
        , data = checkStatus.data;
      layer.msg('选中了：' + data.length + ' 个');
    }
    , isAll: function () { //验证是否全选
      var checkStatus = table.checkStatus('idTest');
      layer.msg(checkStatus.isAll ? '全选' : '未全选')
    }
  };

  $('#demo .layui-btn').on('click', function () {
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });

  function handleAdd() {
    layer.open({
      type: 2,
      title: '添加用户',
      content: './formTemplate.html',
      area: ['600px', '500px'],
      maxmin: true,
      scrollbar: false,
      fixed: true
    });
  }

  var laydate = layui.laydate;
  laydate.render({
    elem: '.fsDate' //指定元素
  });

</script>

</body>


</html>
